<template>
  <div class="play-controller">
    <div class="left" @click="show=!show">
      <img :src="playList[playCurrentIndex].al.picUrl" />

      <div>
        <div class="left-name">{{playList[playCurrentIndex].al.name}}</div>
        <div class="tips">横滑可以切换上下首哦</div>
      </div>
    </div>
    <el-progress :percentage="100" :format="format"></el-progress>
    <div class="right">
      <svg class="icon" aria-hidden="true" @click="play" v-if="paused">
        <use xlink:href="#icon-bofang" />
      </svg>
      <svg class="icon" aria-hidden="true" @click="play" v-else>
        <use xlink:href="#icon-zanting" />
      </svg>

      <svg class="icon play" aria-hidden="true">
        <use xlink:href="#icon-bofangliebiao1" />
      </svg>
    </div>
    <lyric
      :play="play"
      :paused="paused"
      @back="show=!show"
      v-if="show"
      :lyricDetail="playList[playCurrentIndex]"
    ></lyric>

    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playCurrentIndex].id}.mp3`"
    ></audio>
  </div>
</template>
<script>
import Lyric from "@/components/common/Lyric.vue";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      paused: true,
      show: false
    };
  },
  methods: {
    play() {
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.paused = false;
        this.updateTime();
      } else {
        this.$refs.audio.pause();
        this.paused = true;
        clearInterval(this.$store.state.id);
      }
    },
    updateTime() {
      this.$store.state.id = setInterval(() => {
        this.$store.commit("setCurrentTime", this.$refs.audio.currentTime);
      }, 400);
    }
  },
  components: {
    Lyric
  },
  computed: {
    ...mapState(["playList", "playCurrentIndex", "currentTime"])
  },
  updated() {
    this.$store.dispatch("reqLyric", {
      id: this.playList[this.playCurrentIndex].id
    });
  },
  mounted() {}
};
</script>
<style scoped lang="less">
.play-controller {
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #cccccc;
  background-color: #fff;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      margin: 0 0.2rem;
    }
    .left-name {
      width: 4rem;
      font-size: 0.26rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;

      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .tips {
      font-size: 0.24rem;
      color: #cccccc;
    }
  }
  .right {
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      margin-right: 0.2rem;
    }
  }
}
</style>